<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM事件</title>
</head>
<body>
	<h1>DOM事件相关的面试题</h1>
	<p>1. 基本概念：DOM事件的级别</p>
	<p>2. DOM事件模型</p>
	<p>3. DOM事件流</p>
	<p>4. 描述DOM事件捕获的具体流程</p>
	<p>5. Event对象的常见应用</p>
	<p>6. 自定义事件</p>
	<hr>
	<p>
		1. DOM事件的级别： <br>
			分为：DOM0： element.onclick = function () {}
			//有DOM1标准，但是没有和事件相关的标准
				DOM2： element.addEventListener('click', function () {}, false)
				//DOM2的第三个参数，默认为false，（事件在冒泡阶段触发），
						设置为true(事件在捕获阶段触发)
			DOM3: element.addEventListener('keyup', function () {}, false)
			// DOM3 和DOM2相比，多了一些键盘事件，keyup,keydown,
	</p>
	<hr>
	<p>
		2. 事件模型
			事件模型有： 捕获和冒泡
	</p>
	<hr>
	<p>
		3. 事件流
		用户点击事件触发---->捕获------->目标阶段---------冒泡------->windows对象
		4. （捕获：当用户点击时浏览器触发和用户进行交互的事件流，事件流从先从window对象到--document--html---body --- 再到目标DOM节点）
		（冒泡反之亦然）
	</p>

	<p>
		5. Event对象的常见应用
		 event.preventDefault() // 阻止默认事件，比如link的点击事件a标签的跳转事件
		 event.stopPropagation() // 组织冒泡
		 event.stopImmediatePropagation() // 当一个对象上绑定了多个click事件的时候，
			 // 触发click的时候，多个click事件对应得响应函数均会触发
			 // 如果不想全部触发，即可使用event.stopImmediatePropagation()来阻止兄弟事件，即就是别的事件的触发
		事件委托方法的关键api:
					event.currentTarget()
					event.target
		<ul id='dispatchPropagation' @click="dispatchPropagation" style="color: red">
			<li>我是事件委托的例子的实例1</li>
			<li>我是事件委托的例子的实例2</li>
			<li>我是事件委托的例子的实例3</li>
		</ul>
		<script>
			let dispatchPropagation = document.getElementById('dispatchPropagation')
			dispatchPropagation.onclick = function (event) {
				console.log(event.currentTarget) // ul对象 
				console.log(event.target) // ul中的某一个li元素
			}
		</script>
	</p>

	<hr>
	<p>自定义事件</p>
	<script>
		var eve = new Event('test')
		window.addEventListener('test', function() {
			console.log('event test dispatch')
		})
		setTimeout(() => {
			window.dispatchEvent(eve)
		}, 1000);

		var eve2 = new CustomEvent('test2', {
			name: 'test2'
		})
		window.addEventListener('test2', function() {
		console.log('custoEvent test2 dispatch')
		})
		setTimeout(() => {
			window.dispatchEvent(eve2)
		}, 1000);
	</script>
	<hr>
	<p style="color: red">捕获顺序</p>
	<div id="capture">
		<style>
			#capture {
				width: 100px;
				height: 100px;
				background: red;
				color: #fff;
				line-height: 100px;
				text-align: center;
			}
		</style>
		<script>
			let capture = document.getElementById('capture')
			window.addEventListener('click', function () {
				console.log('window capture')
			}, true)
			document.addEventListener('click', function () {
				console.log('document capture')
			}, true)
			document.documentElement.addEventListener('click', function () {
				console.log('html capture')
			}, true)
			document.body.addEventListener('click', function () {
				console.log('body capture')
			}, true)
			capture.addEventListener('click', function () {
				console.log('ev capture')
				console.log('`````````````````````````````````````````````````````````````````')
			}, true)
			window.addEventListener('click', function () {
				console.log('window capture')
			}, false)
			document.addEventListener('click', function () {
				console.log('document capture')
			}, false)
			document.documentElement.addEventListener('click', function () {
				console.log('html capture')
			}, false)
			document.body.addEventListener('click', function () {
				console.log('body capture')
			}, false)
			capture.addEventListener('click', function () {
				console.log('ev capture')
			}, false)
		</script>
	</div>
</body>
</html>